<template>
  <div>
    <div class="littlebutton">
      <div class="input2">
          <el-input
            size="small"
            placeholder="请输入字典分类名称"
            suffix-icon="el-icon-search"
            v-model="inputtext"
            @keyup.enter.native="searchs"
          >
          </el-input>
        </div>
      <div>
        <span @click="mulu"
        ><button type="primary" class="buttons">新增目录</button></span
      >
      <span @click="fenlei" v-show="!buttonisshow"><button type="primary" class="buttons">新增分类</button></span>
      <span> <button class="button" @click="shangyi">上移</button></span>
      <span> <button class="button" @click="xiayi">下移</button></span>
      </div>
    </div>
  <div >
    <template>
      <el-table
        :data="tableData"
        max-height="750"
        style="width: 100%"
        height="calc(100% - 1px)"
        :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="type" label="字典分类编码" width="300">
        </el-table-column>
        <el-table-column prop="name" label="字典分类名称" width="400">
        </el-table-column>
        <el-table-column prop="folder" label="是否目录" align="center">
          <template #default="{ row }">
            <span>{{ row.folder ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="extend" label="是否个性化" align="center">
          <template #default="{ row }">
            <span>{{ row.extend ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cascade" label="是否级联" align="center">
          <template #default="{ row }">
            <span>{{ row.cascade ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <span @click="openxiugai(row)">
              <i
                class="el-icon-edit"
                style="color: skyblue; "
              ></i
            ></span>
            <span @click="del(row)">
              <i
                class="el-icon-delete"
                style="color: red; margin-left: 30px;"
              ></i
            ></span>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
  </div>
</template>

<script>
import { getshangfenleiapi, getxiafenleiapi, getdictionarychild, getchildapi } from '.././api/dictionary'
export default {
  name: 'DictionaryTableone',
  // props: ['tableData', 'buttonisshow'],
  props: {
    tableData: {
      type: Array
    },
    buttonisshow: {
      type: Boolean,
      default: false
    },
    value: {},
    name: {}
  },
  data () {
    return {
      inputtext: '',
      val: ''
    }
  },

  mounted () {
  },
  methods: {
    openxiugai (row) {
      this.$emit('opendialog', row)
    },
    del (row) {
      this.$emit('deldialog', row)
    },
    mulu () {
      this.$emit('newmulu')
    },
    fenlei () {
      this.$emit('newfenlei')
    },
    async handleCurrentChange (val) {
      this.val = val
    },
    async shangyi () {
      if (!this.val) {
        this.$message.warning('请选择上移属性')
      } else {
        if (this.val.id === this.tableData[0].id) {
          this.$message.warning('已经是最上面一项不可移动')
        } else {
          await getshangfenleiapi({ sortId: this.val.id })
          this.$message.success('上移成功')
          this.$emit('shangyi')
        }
      }
    },
    async xiayi () {
      if (!this.val) {
        this.$message.warning('请选择下移属性')
      } else {
        if (this.val.id === this.tableData[this.tableData.length - 1].id) {
          this.$message.warning('已经是最后一项不可下移')
        } else {
          await getxiafenleiapi({ sortId: this.val.id })
          this.$message.success('下移成功')
          this.$emit('shangyi')
        }
      }
    },
    searchs () {
      this.tableData = this.tableData.filter(ele => ele.name.indexOf(this.inputtext) !== -1)
    }
  },
  watch: {
    async inputtext (val) {
      if (val === '') {
        if (this.name === '字典分类') {
          const ress = await getdictionarychild()
          this.tableData = ress.data.list
          this.getdictionary()
        } else {
          const res = await getchildapi({ parentId: this.value.id ? this.value.id : 289 })
          this.tableData = res.data.list
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.buttons{
  width: 87px;
  height: 32px;
  // padding: -6px 0 0 -6px;
  border: none;
  background-color: #1890ff;
  border-radius: 3px;
  color: #fff;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #333;
  border: 1px solid #ccc;
  background-color: #fff;
}
.input2{
  width: 300px;
}
.littlebutton span {
  margin-right: 10px;
}
.littlebutton{
  // margin-left: 950px;
  // width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
